import * as React from 'react';
import {connect} from 'react-redux';
import {BrowserRouter} from 'react-router-dom';
import {Route} from 'react-router-dom';
import {Switch} from 'react-router-dom';
import {WriteArticle} from './component';
import {Header} from './component';
import './App.css';
import {Login} from './component';
import {IReducer} from "./reducer";


interface IProps {
    dispatch:any
}

export interface IState {
    permission:boolean;
}

class App extends React.Component<IProps> {

    state:IState = {
        permission:false
    };

    refreshAppUpdatePermission(data:IState){
        const {permission} = data;
        this.setState({permission})
    }

    public render() {
        const permission = this.state.permission;
        return (
            <div className="App">
                {permission?
                    <BrowserRouter>
                        <div className="routerContainer">
                            <Header/>
                            <Switch>
                                <Route exact={true} path="/writeArticle" component={WriteArticle}/>
                            </Switch>
                        </div>
                    </BrowserRouter>:
                    <Login refreshAppUpdatePermission={this.refreshAppUpdatePermission.bind(this)}/>}
            </div>
        );
    }
}


export default connect((state:IReducer)=>{
    const {componentRefreshReduce} = state;
    return {componentRefreshReduce};
})(App);
